<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="author" content="ThemeFuse"/>
    <meta name="keywords" content=""/>

    <title>房价分析</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:400italic,400,700|Bitter' rel='stylesheet' type='text/css'/>
    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
    <link href="styles/orange-blue.css" media="screen" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/general.js"></script>

    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

    <script type="text/javascript" src="js/slides.min.jquery.js"></script>

    <link href="css/cusel.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/cusel-min.js"></script>
    <script type="text/javascript" src="js/jScrollPane.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            var params = {
                changedEl: ".select_styled",
                visRows: 15,
                scrollArrows: true
            }
            cuSel(params);
        });
    </script>
    <script type="text/javascript" src="js/jquery.dependClass.js"></script>
    <script type="text/javascript" src="js/jquery.slider-min.js"></script>
    <link href="css/jslider.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
    <link rel="stylesheet" type="text/css" href="images/skins/tango/skin.css"/>
    <link href="css/customInput.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.customInput.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('.input_styled input').customInput();
        });
    </script>
    <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
    <link href="css/jquery.qtip.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('.tooltip[title]').qtip({
                position: {
                    my: 'bottom center',
                    at: 'top center',
                    adjust: {y: -1}
                },
                style: {
                    classes: 'ui-tooltip-dark ui-tooltip-rounded'
                }
            });
        });
    </script>
    <!--[if IE 7]>
    <link href="css/ie.css" media="screen" rel="stylesheet" type="text/css">
    <![endif]-->
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
<div class="body_wrap">
    <div class="header" style="background-image:url(images/header_default_2.jpg);">
        <div class="header_inner">
            <div class="container_12">
                <div class="header_top">
                    <div class="logo">
                        <a href="index.html"><img src="images/logo.png" alt=""/></a>
                        <strong>scream - 房地产</strong>
                    </div>
                    <div class="topmenu">
                        <ul class="dropdown">
                            <li class="menu-item-home"><a href="index.html"><span>主页</span></a></li>
                            <li><a href="properties-list.html"><span>房源</span></a></li>
                            <li><a href="search.html"><span>搜索</span></a></li>
                            <li><a href="contact.html"><span>联系</span></a></li>
                            <li><a href="analyse.html"><span>分析</span></a></li>
                        </ul>
                    </div>

                    <div class="header_phone">
                        <span>三峡大学</span></br>
                        <span>Scream团队</span>
                    </div>

                    <div class="clear"></div>
                </div>

                <div class="header_carusel">

                    <strong class="carusel_title">精选房源</strong>

                    <div class="carusel_list carusel_small">
                        <ul id="latest_properties" class="jcarousel-skin-tango">
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/featured_post_4.jpg" width="218" height="125" alt=""/></a>
                                </div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/featured_post_2.jpg" width="218" height="125" alt=""/></a>
                                </div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/featured_post_1.jpg" width="218" height="125" alt=""/></a>
                                </div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/featured_post_3.jpg" width="218" height="125" alt=""/></a>
                                </div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/property_02.jpg" width="218" height="125" alt=""/></a></div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                            <li>
                                <div class="item_image"><a href="analyse.html"><img
                                        src="images/temp/property_03.jpg" width="218" height="125" alt=""/></a></div>
                                <div class="item_name"><a href="analyse.html">标题待定</a></div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        jQuery(document).ready(function ($) {
                            $('#latest_properties').jcarousel({
                                easing: 'easeOutBack',
                                animation: 600,
                                scroll: 1
                            });
                        });
                    </script>

                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!--/ header -->
</div>

<div style="display:none">
    <script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script>
</div>
<div id="container" style="width: 1500px;height:400px;"></div>
<script type="text/javascript">
    /*// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'light');

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '二手房价分析'
        },
        tooltip: {},
        legend: {
            data: ['价格']
        },
        xAxis: {
            data: ["100", "110", "120", "130", "140", "150","160","170"]
        },
        yAxis: {},
        series: [{
            name: '价格',
            type: 'bar',
            data: [80, 85, 90, 100, 120, 140,160,180]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);*/
</script>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var dataAxis = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
    var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
    var yMax = 500;
    var dataShadow = [];

    for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        title: {
            text: '链家二手房分析',
            subtext: '点击柱子或者两指在触屏上滑动能够自动缩放'
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    color: 'rgba(0,0,0,0.05)'
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataShadow,
                animation: false
            },
            {
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };

    // Enable data zoom when user click bar.
    var zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>
